<script setup lang="ts">

import PanelBox from "@/components/ProjectPanel/panel.vue";
import {computed, onMounted, reactive, ref} from "vue";
import {recoverByFileId,reqDeleteFile} from "@/api/file/fileList";
import {ElMessage} from "element-plus";

let fileDate = ref([])
const page =reactive({
  num:0,
  size:10,
  total:0
})

onMounted(()=>{
  const pageData = {
    page: page.num,
    size: page.size,
  }
  getFile(pageData)
})

const search = ref('')

const filterFileDate = computed(() =>
    fileDate.value.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)

const getFile = (pageData:any) => {

  reqDeleteFile(pageData).then(res => {
    fileDate.value = res.data.data.content
    page.total = res.data.data.totalElements
  })
}

const recover = (fileId: string) => {
  recoverByFileId(fileId).then(res => {
    const pageData = {
      page: page.num,
      size: page.size,
    }
    getFile(pageData)
    ElMessage.success(res.data.msg)
  })
}

const handlePagination = (val:number) => {
  const pageData = {
    page: val-1,
    size: page.size,
  }
  getFile(pageData)
}

</script>

<template>
  <div class="context">
    <panel-box :has-body="true" :has-body-title="true" :has-driver="true" :has-foot="true">
      <template #body-title>
        <span>回收站文件</span>
      </template>
      <template #body-table>
        <el-table stripe :data="filterFileDate" max-height="800px" size="large" style="width: 100%;" empty-text="暂无数据">
          <el-table-column label="文件名" prop="name" />
          <el-table-column label="删除时间" prop="deletedAt"/>
          <el-table-column label="文件大小（MB）" prop="size"/>
          <el-table-column label="文件剩余存储时间（天）">
            <template #default="scope">
              <span style="color: #626aef" v-if="scope.row.timeLeft>3">{{scope.row.timeLeft}}</span>
              <span style="color: red" v-else>{{scope.row.timeLeft}}</span>
            </template>
          </el-table-column>
          <el-table-column align="right">
            <template #header>
              <el-input v-model="search" size="small" placeholder="输入要搜索的文件名" />
            </template>
            <template #default="scope">
              <el-button size="small" @click="recover(scope.row.fileId)"
              >恢复</el-button>
            </template>
          </el-table-column>

        </el-table>

      </template>
      <template #body-table-action-pagination>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            @change="handlePagination"
        />
      </template>
    </panel-box>
  </div>
</template>

<style scoped lang="scss">
.context{
  width: calc(100% - 20px);
}
</style>
